<template>
  <div>
    <!-- <svg-icon
      :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
      @click="click"
    /> -->
    <i :class="['screenfull', isFullscreen ? 'el-icon-yjwl-quxiaoquanping_o' : 'el-icon-yjwl-quanping_o']" @click="click" :title="isFullscreen ? '取消全屏' : '全屏'"></i>
  </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  name: 'Screenfull',
  data () {
    return {
      isFullscreen: false
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    this.destroy()
  },
  methods: {
    click () {
      // if (!screenfull.enabled) {
      //   this.$swal({
      //     message: 'you browser can not work',
      //     type: 'warning'
      //   })
      //   return false
      // }
      screenfull.toggle()
      this.isFullscreen = !this.isFullscreen
    },
    change () {
      this.isFullscreen = screenfull.isFullscreen
    },
    init () {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy () {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    }
  }
}
</script>

<style scoped>
.screenfull {
  height: 36px;
  line-height: 36px;
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;
  vertical-align: 10px;
  font-size: 26px;
}
</style>
